<template>
  <div id="home">
    <div class="home_body">
      <div class="nav">
        <router-link
          to="/home/space"
          :class="
            this.$store.state.homeType == 'space' ? 'activeRouter' : 'router'
          "
          @click.native="changeType('space')"
          replace
        >
          <div
            :class="
              this.$store.state.homeType == 'space' ? 'activeBox' : 'iconBox'
            "
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-UserDrivenInnovation"></use>
            </svg>
          </div>
        </router-link>
        <span></span>
        <router-link
          to="/home/chatBox/standbyPage"
          :class="
            this.$store.state.homeType == 'chatBox' ? 'activeRouter' : 'router'
          "
          @click.native="changeType('chatBox')"
          replace
        >
          <div
            :class="
              this.$store.state.homeType == 'chatBox' ? 'activeBox' : 'iconBox'
            "
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiaoxi"></use>
            </svg>
          </div>
        </router-link>
        <router-link
          to="/home/discovery"
          :class="
            this.$store.state.homeType == 'discovery'
              ? 'activeRouter'
              : 'router'
          "
          @click.native="changeType('discovery')"
          replace
        >
          <div
            :class="
              this.$store.state.homeType == 'discovery'
                ? 'activeBox'
                : 'iconBox'
            "
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-faxian"></use>
            </svg>
          </div>
        </router-link>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
      changeType(type) {
        this.$store.commit('changeType', type)
      }
    },
    beforeUpdate() {
      sessionStorage.setItem('type', this.$store.state.homeType)
    },
  }
</script>

<style scoped>
  .home_body {
    display: flex;
    flex-direction: row;
    height: 100vh;
  }
  .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    padding-top: 12px;
    background-color: #202225;
  }
  .nav .router {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 10px 0;
    overflow: hidden;
  }
  .nav .router:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 20px;
    transform: translate(-6px, -50%);
    border-radius: 4px;
    background-color: #fff;
    opacity: 1;
    transition: all 0.1s linear;
  }
  .nav .activeRouter {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 10px 0;
    overflow: hidden;
  }
  .nav .activeRouter::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-6px, -50%);
    width: 10px;
    height: 40px !important;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.1s linear;
  }
  .iconBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #36393f;
  }
  .activeBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background-color: #5865f2;
  }
  .router:hover .iconBox {
    border-radius: 15px;
    background-color: #5865f2;
    transition: all 0.3s linear;
  }
  .nav svg {
    font-size: 28px;
  }
  .nav span {
    display: block;
    width: 32px;
    margin-bottom: 10px;
    border: 1px solid #2d2f32;
    border-radius: 1px;
    background-color: #2d2f32;
  }
  .content {
    flex: 1;
  }
</style>